<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Pricing</title>
    <style></style>
</head>

<body>
    <div
        class="text-white flex flex-col md:flex-row justify-center items-center space-y-4 bg-sink-400 md:space-y-0 md:space-x-6 min-h-screen bg-slate-800">
        <div class="border border-4 rounded-md border-gray-500 text-center">
            <div class="p-4">
                <div class="text-xs">BASIC</div>
                <div class="text-3xl flex items-end justify-center mt-3 font-serif font-bold">
                    <div>100</div>
                    <div>GB</div>
                </div>
                <div class="text-xs">$1.99/month</div>
                <button class="border border-purple-500 border-1 rounded px-4 text-xs py-1 mt-3 hover:bg-purple-500 duration-200">
                    Pruchase
                </button>
            </div>
            <div class="border-t border-slate-700 mb-2"></div>
            <div class="p-2 flex flex-col space-y-1">
                <p class="text-xs text-slate-200">100 GB storage</p>
                <p class="text-xs text-slate-200">Option to add members</p>
                <p class="text-xs text-slate-200">Extra member benifit</p>
            </div>
        </div>
        <div class="border border-4 rounded-md border-purple-500 text-center">
            <div class="p-4">
                <div class="text-xs">STANDARD</div>
                <div class="text-3xl flex items-end justify-center mt-3 font-serif font-bold">
                    <div>200</div>
                    <div>GB</div>
                </div>
                <div class="text-xs">$1.99/month</div>
                <button class="bg-purple-500 rounded px-4 text-xs py-1 mt-3">
                    Pruchase
                </button>
            </div>
            <div class="border-t border-slate-700 mb-2"></div>

            <div class="p-2 flex flex-col space-y-1">
                <p class="text-xs text-slate-200">200 GB storage</p>
                <p class="text-xs text-slate-200">Option to add members</p>
                <p class="text-xs text-slate-200">Extra member benifit</p>
            </div>
        </div>
        <div class="border border-4 rounded-md border-gray-500 text-center">
            <div class="p-4">
                <div class="text-xs">PREMIUM</div>
                <div class="text-3xl flex items-end justify-center mt-3 font-serif font-bold">
                    <div>2</div>
                    <div>TB</div>
                </div>
                <div class="text-xs">$1.99/month</div>
                <button class="border border-purple-500 border-1 rounded px-4 text-xs py-1 mt-3 hover:bg-purple-500">
                    Pruchase
                </button>
            </div>
            <div class="border-t border-slate-700 mb-2"></div>
            <div class="p-2 flex flex-col space-y-1">
                <p class="text-xs text-slate-200">2 TB storage</p>
                <p class="text-xs text-slate-200">Option to add members</p>
                <p class="text-xs text-slate-200">Extra member benifit</p>
            </div>
        </div>
    </div>
</body>

</html>
